<template>
  <div class="w h" style="overflow-y:auto">
    <header class="page-header">
      <span class="header-title">Machine Performance</span>
    </header>
    <main class="page-main">
      <div class="main-chart-box">
        <div class="chart-header">
          <div class="chart-header-title">优先级</div>
          <div class="chart-legend">
            <span>JAM</span>
            <span>Ava</span>
            <span>LYD</span>
          </div>
        </div>
        <div class="chart-subheading">Task Perday</div>
        <div class="chart-main">
          <img class="w h" src="@/assets/temp/temp1.png" />
        </div>
      </div>
      <div class="title-category">
        <div class="category-title"> Your Activity </div>
        <!-- <div class="category-title-btn category-title-btn-time">09 h 45 min</div> -->
      </div>
      <div class="main-chart-box">
        <div class="chart-header-date">
          <span>
            <van-icon name="arrow-left" />
          </span>
          <span @click="showPicker=true">Nov 2022</span>
          <span>
            <van-icon name="arrow" />
          </span>
        </div>
        <div class="chart-main">
          <img class="w h" src="@/assets/temp/temp2.png" />
        </div>
        <!-- 弹出层选择日期 -->
        <van-popup v-model:show="showPicker" round position="bottom">
          <van-picker :columns="columns" title="2022" @cancel="showPicker = false"
            @confirm="onConfirm" />
        </van-popup>

      </div>

      <page-footer isMainPage> 已经到达底部了 </page-footer>
    </main>
  </div>
</template>

<script>

import pageBase from '@/views/mixins/page-base.ts';

export default {
  mixins: [pageBase],
  data() {
    return {
      showPicker: false,
      columns: [{ text: '1月', value: '1' },
      { text: '2月', value: '2' },
      { text: '3月', value: '3' },
      { text: '4月', value: '4' },
      { text: '5月', value: '5' },
      { text: '6月', value: '6' },
      { text: '7月', value: '7' },
      { text: '8月', value: '8' },
      { text: '9月', value: '9' },
      { text: '10月', value: '10' },
      { text: '11月', value: '11' },
      { text: '12月', value: '12' },]
    }
  },
  methods: {
    onConfirm(e) {
      this.showPicker = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.page-header {
  padding: 46px 24px 0px 24px;
  text-align: center;
  @extend .box-b, .w;
  .header-title {
    font-size: 18px;
    font-weight: 700;
    color: rgba(16, 39, 90, 1);
  }
}
.page-main {
  padding: 0 24px;
  margin-top: 36px;
  .main-chart-box {
    height: 300px;
    border-radius: 16px;
    background: #f9fafdff;
    padding: 14px 16px 12px 16px;
    .chart-header {
      @extend .f-b, .box-b, .a-i-c;
      &-title {
        font-size: 20px;
        font-weight: 700;
        color: #10275a;
      }
      @mixin chart-legend-span($color) {
        font-size: 12px;
        font-weight: 400;
        color: #10275a;
        margin-left: 24px;
        position: relative;
        &::before {
          content: '';
          position: absolute;
          left: -14px;
          top: 1px;
          @include circle($color, 10px);
        }
      }
      .chart-legend {
        span:nth-child(1) {
          @include chart-legend-span(#e77d7d);
        }
        span:nth-child(2) {
          @include chart-legend-span(#7d88e7);
        }
        span:nth-child(3) {
          @include chart-legend-span(#81e89e);
        }
      }
    }
    .chart-subheading {
      font-size: 14px;
      font-weight: 400;
      color: #8586a9;
      margin-top: 12px;
      margin-bottom: 30px;
    }

    .chart-header-date {
      text-align: center;
      margin-top: 30px;
      margin-bottom: 30px;
      font-size: 20px;
      font-weight: 400;
      color: rgba(16, 39, 90, 1);

      span {
        margin: 24px;
      }
    }
  }
  @include title-category(24px);
  .title-category {
    margin-bottom: 24px;
  }
}
</style>
